<template>
  <div class="article">
    <!-- 顶部的筛选条件 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>文章列表</span>
      </div>
      <el-form>
        <!-- 文章的状态 -->
        <el-form-item label="文章状态：">
          <el-radio-group v-model="filterParams.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 频道列表 -->
        <el-form-item label="频道列表：">
          <!-- 3.只用组件 -->
          <!-- 父组件 加 :channels='channels' 通过动态属性 给子组件进行传值 使用props接收 -->
          <!-- <my-channel @select-channel='updateId' :channel_id='filterParams.channel_id' :channels='channels'></my-channel> -->
          <!-- <my-channel @input='filterParams.channel_id=$event' :value='filterParams.channel_id'></my-channel> -->
          <my-channel v-model='filterParams.channel_id'></my-channel>

          <!-- <el-select v-model="filterParams.channel_id" value='' placeholder="请选择频道列表：">
            <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select> -->
        </el-form-item>
        <!-- 时间范围 -->
        <el-form-item label="时间范围：">
          <el-date-picker v-model="rangTime" @change="handleChange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <!-- 如果事件函数由普通的点击事件触发，那么事件函数的参数默认就是事件对象 -->
          <el-button @click='handleQuery' type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 文章列表 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>共找到{{total}}条符合条件的内容</span>
      </div>
      <!-- :data='list' 将数据展示出来 -->
      <el-table :data='list'>
        <el-table-column label="封面" prop='cover.images[0]'>
          <!-- 插槽 -->
          <template v-slot='slotProps'>
            <el-image class="cover-img" :src='slotProps.row.cover.images[0]'>
              <!-- 如果图片的地址加载失败，就显示标签之间的内容 -->
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
          <!-- 需求：显示一张图片效果 -->
          <!-- 这里要做点儿什么？ 可以定制这一列的内容-->
          <!-- 但是这一个的数据应该从哪里来？ el-table-column组件内部提供-->
          <!-- 参考代码 -->
          <!-- <el-table-column prop='tag'>
            <template v-slot="scopeProps">
              <el-tag
                :type="scopeProps.row.tag === '家' ? 'primary' : 'success'"
                disable-transitions>{{scopeProps.row.tag}}</el-tag>
            </template>
          </el-table-column> -->
        </el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="状态" prop='status'>
          <!-- 插槽 -->
          <template v-slot='slotProps'>
            <el-tag v-if="slotProps.row.status===0" type="info">草稿</el-tag>
            <el-tag v-if="slotProps.row.status===1">待审核</el-tag>
            <el-tag v-else-if="slotProps.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-else-if="slotProps.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else type="danger">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate"></el-table-column>
        <el-table-column label="操作" width="120px">
          <!-- 插槽 -->
          <template v-slot='slotProps'>
            <el-button plain @click="toEdit(slotProps.row.id)" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button plain @click="handleDelete(slotProps.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <!-- 以下介绍是el 提供的 -->
      <!-- :current-page='filterParams.page'  当前页 -->
      <!-- :page-size='filterParams.per_page'  一页显示多少行 -->
      <!-- @current-change  当前页发生变化时触发 -->
      <el-pagination background @current-change='changePage' :current-page='filterParams.page' :page-size='filterParams.per_page' layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>

// 1.导入自定义组件
import MyChannel from '@/components/MyChannel.vue'
// 导入接口调用的业务方法
// import { loadArticleList, loadChannelList, deleteArticle } from '@/api/article.js'
import { loadArticleList, deleteArticle } from '@/api/article.js'

export default {
  name: 'ArticleList',
  // 2. 配置子组件
  components: {
    MyChannel
  },
  data () {
    return {
      filterParams: {
        // 文章状态码
        status: null,
        // 文章所属频道
        channel_id: null,
        // 开始时间
        begin_pubdate: null,
        /// 结束时间
        end_pubdate: null,
        // 页码
        page: 1,
        // 每页的条数
        per_page: 10

      },
      // 文章发布时间范围
      rangTime: '',
      // 文章列表数据
      list: [],
      // 文章列表总数
      total: 0
      // 获取频道列表 存储到数组中
      // channels: []
    }
  },
  methods: {
    // 编辑  因为编辑页面和发布页面布局相同
    toEdit (id) {
      this.$router.push('/home/publish?id=' + id)
    },
    // 更改id
    updateId (id) {
      // 接收子组件传递过来的id值
      this.filterParams.channel_id = id
    },
    // 删除操作
    handleDelete (id) {
      // 先跳出一个弹框 确认是否删除 如果确认 根据id删除该行
      this.$confirm('确认删除吗').then(async () => {
        await deleteArticle(id)
      }).catch((e) => {
        // 这个catch 有两个作用 如果点击取消触发  如果有异常触发
        if (e === 'cannel') {
          console.log('取消删除')
        } else {
          this.$message.error('删除文章失败')
        }
      })
    },
    // 当页码发生变化时 自动触发该方法 将变化的页码给参数
    changePage (newPage) {
      // 将新一页显示出来
      this.filterParams.page = newPage
      // 渲染
      this.loadArticleList()
    },
    // 查询
    handleQuery () {
      // console.log(this.filterParams.status)
      // console.log(this.filterParams.channel_id)
      // console.log(this.rangTime)
      // console.log(this.channels)
      // console.log(this.filterParams)

      // 将查询结果从第一页开始显示
      this.filterParams.page = 1
      // 渲染页面
      this.loadArticleList()
    },
    // 处理选中的时间范围  分开时间
    handleChange (date) {
      // console.log(date) // 返回一个数组[]  里面的内容是选择的时间范围
      this.filterParams.begin_pubdate = date[0]
      this.filterParams.end_pubdate = date[1]
    },
    // 获取频道列表
    // async loadChannelList () {
    //   try {
    //     const ret = await loadChannelList()
    //     // console.log(ret)
    //     this.channels = ret.data.channels
    //   } catch (error) {
    //     this.$message.error('获取频道信息失败')
    //   }
    // },
    async loadArticleList () {
      // 加载文章列表数据
      try {
        const ret = await loadArticleList(this.filterParams)
        // console.log(ret)
        this.list = ret.data.results
        this.total = ret.data.total_count
      } catch (error) {
        this.$message.error('获取文章列表失败')
      }
    }
  },
  created () {
    this.loadArticleList()
    // this.loadChannelList()
  }
}
</script>
<style scoped lang='less'>
.cover-img {
  width: 100px;
}
</style>
